<template>
  <div class="yk-button">
    <button :class="[size, nom]" class="button"><slot></slot></button>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      default: "base",
    },
    nom: {
      default: "primary",
    },
  },
};
</script>

<style lang="scss" scoped>
.yk-button {
  .button {
    text-align: center;
  }
  .max {
    min-width: 100px;
    height: 48px;
    border-radius: 24px;
    padding: 0 24px;
    line-height: 48px;
  }

  .base {
    min-width: 80px;
    height: 36px;
    border-radius: 24px;
    padding: 0 20px;
    line-height: 36px;
  }

  .small {
    min-width: 72px;
    height: 32px;
    border-radius: 24px;
    padding: 0 20px;
    line-height: 32px;
  }

  //nom
  .primary {
    background: #202020; //$gray-1
    color: #fff; //$gray-10
  }
  .secondary {
    background: #fff; //$gray-10
    color: #202020; //$gray-1
    border: 1px solid #202020;
  }

  .cprimary {
    background: #3b73f0; //$primary-color
    color: #fff; //$gray-10
    font-weight: 900;
  }

  .csecondary {
    background: #fff; //$gray-10
    color: #202020; //$gray-1
  }
}
</style>